// 创建一个分组用来组合要画的图表元素
var main;

var data = {
	fieldNames: ['助攻', '盖帽', '篮板', '犯规', '得分', '失误'],
	values: []
};
var radius, total, level, rangeMin, rangeMax, arc, onePiece;

var polygons = {
	webs: [],
	webPoints: []
};

var webs; //

var lines; //	

function Init() {
	main = d3.select('.second svg').append('g')
		.attr('class', 'main')
		.attr('transform', "translate(" + width_bar / 7 * 5 + ',' + height_bar / 7 * 2 + ')');
	// 设定一些方便计算的常量
	radius = 60; //最大半径
	// 指标的个数，即fieldNames的长度
	total = 6;
	// 需要将网轴分成几级，即网轴上从小到大有多少个正多边形
	level = 4;
	// 网轴的范围，类似坐标轴
	rangeMin = 0;
	rangeMax = 100;

	// 每项指标所在的角度
	arc = 2 * Math.PI;
	onePiece = arc / total;

	// 计算网轴的正多边形的坐标 
	for (var k = level; k > 0; k--) {
		var webs = '', //用来存放polygon的点的信息
			webPoints = []; //存放点的位置
		var r = radius / level * k;
		for (var i = 0; i < total; i++) {
			var x = r * Math.sin(i * onePiece),
				y = r * Math.cos(i * onePiece);
			webs += x + ',' + y + ' ';
			webPoints.push({
				x: x,
				y: y
			});
		}
		polygons.webs.push(webs);
		polygons.webPoints.push(webPoints);
	}
}

function DrawWebs() {
	Init();
	// 绘制网轴
	webs = main.append('g')
		.classed('webs', true);
	
	webs.selectAll('polygon')
		.data(polygons.webs)
		.enter()
		.append('polygon')
		.attr('points', function(d) {
			return d;
		});
	DrawLines();
	AddSigns();
}

function DrawLines() {
	// 添加纵轴
	lines = main.append('g')
		.classed('lines', true);

	lines.selectAll('line')
		.data(polygons.webPoints[0])
		.enter()
		.append('line')
		.attr('x1', 0)
		.attr('y1', 0)
		.attr('x2', function(d) {
			return d.x;
		})
		.attr('y2', function(d) {
			return d.y;
		})
		.attr('stroke', 'black')
		.attr('stroke_width', .5)
		.attr('opacity', .5)
		.attr('stroke-dasharray', '10 5');
}

function DrawRadar(teamData, range, teams) {
	DrawWebs();
	console.log(range);
	DrawArea(teamData, range,teams);
}


function DrawArea(teamData, range, teams) {
	// 计算雷达图表的坐标
	var areasData = [];
	var item = ['Assists', 'Block', 'Backboard', 'Foul', 'Score', 'Turnover'];
	var values = teamData;
	console.log(values);
	for (var i = 0; i < values.length; i++) {
		var value = values[i],
			area = '',
			points = [];
		for (var k = 0; k < total; k++) {
			var r = radius * (value[k] - range[item[k]][0]) / (range[item[k]][1] - range[item[k]][0]);
			var x = r * Math.sin(k * onePiece),
				y = r * Math.cos(k * onePiece);
			area += x + ',' + y + ' ';
			points.push({
				x: x,
				y: y
			})
		}
		areasData.push({
			polygon: area,
			points: points
		});
	}

	// 添加g分组包含所有雷达图区域
	var areas = main.append('g')
		.classed('areas', true);
	// 添加g分组用来包含一个雷达图区域下的多边形以及圆点 
	areas.selectAll('g')
		.data(areasData)
		.enter()
		.append('g')
		.attr('class', function(d, i) {
			return teams[i].abb;
		})
		.on('mouseover',function(d){
			var thissvg = d3.select(this)[0][0].className.animVal;
			for(var i = 0;i<teams.length;++i){
				if(thissvg == teams[i].abb){
					d3.select(this).append("svg:title")
						.text(teams[i].Team + '('+ teams[i].abb +')' );
					break;	
				}
			}
			
		});
	for (var i = 0; i < areasData.length; i++) {
		// 依次循环每个雷达图区域
		var area = areas.select('.' + teams[i].abb),
			areaData = areasData[i];
		// 绘制雷达图区域下的多边形
		area.append('polygon')
			.attr('points', areaData.polygon)
			.attr('stroke', function(d, index) {
				return getColor_Radar(i);
			})
			.attr('fill', function(d, index) {
				return getColor_Radar(i);
			});

		// 绘制雷达图区域下的点 
		var circles = area.append('g')
			.classed('circles', true);
		circles.selectAll('circle')
			.data(areaData.points)
			.enter()
			.append('circle')
			.attr('cx', function(d) {
				return d.x;
			})
			.attr('cy', function(d) {
				return d.y;
			})
			.attr('r', 3)
			.attr('stroke', function(d, index) {
				return getColor_Radar(i);
			});
	}
}

function AddSigns() {
	// 计算文字标签坐标
	var textPoints = [];
	var textRadius = radius + 15;
	for (var i = 0; i < total; i++) {
		var x = textRadius * Math.sin(i * onePiece),
			y = textRadius * Math.cos(i * onePiece);
		textPoints.push({
			x: x,
			y: y
		});
	}
	// 绘制文字标签
	var texts = main.append('g')
		.classed('texts', true);
	texts.selectAll('text')
		.data(textPoints)
		.enter()
		.append('text')
		.attr('x', function(d) {
			return d.x;
		})
		.attr('y', function(d) {
			return d.y;
		})
		.text(function(d, i) {
			return data.fieldNames[i];
		})
		.attr('font-size', 12);
}

function getColor_Radar(idx) {
	var palette = [
		'#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
		'#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
		'#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
		'#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
	]
	return palette[idx % palette.length];
}
